<template>
  <div>
    <vxe_table
      :options="options"
      @handleTableBtn="handleTableBtn"
      ref="baseTable"
    >
      <template #btn> </template>
    </vxe_table>
    <Info ref="Info"></Info>
    <Fahuo ref="fahuo"></Fahuo>
  </div>
</template>

<script>
import vxe_table from "@/components/table/vxe_table.vue";
import tableMixin from "@/mixins";
import { hasBtnAuth, parseTime } from "@/utils";
import { list, receivable } from "@/api/order";
import Info from "./comps/info.vue";
import { Message } from "element-ui";
import Fahuo from "../comps/fahuo.vue";
export default {
  mixins: [tableMixin],
  components: {
    vxe_table,
    Info,
    Fahuo
  },
  data() {
    return {
      options: {
        id: "order_table",
        apiFn: list,
        columns: [
          {
            field: "orderId",
            title: "订单ID",
            search: true,
            valueType: "input",
          },
          {
            field: "state",
            title: "订单状态",
            type: "html",
            search: true,
            valueType: "select",
            options: [
              {
                label: "退款完成",
                value: -2,
              },
              {
                label: "取消",
                value: -1,
              },
              {
                label: "未支付",
                value: 0,
              },
              {
                label: "已支付",
                value: 1,
              },
              {
                label: "已发货",
                value: 2,
              },
              {
                label: "确认收货",
                value: 3,
              },
              {
                label: "完成",
                value: 8,
              },
            ],
            formatter: ({ row }) => {
              if (row.state == 0) {
                return "<span style='color:#e6a23c'>未支付</span>";
              } else if (row.state == 1) {
                return "<span style='color:green'>已支付,待发货</span>";
              } else if (row.state == -1) {
                return "<span style='color:red'>取消</span>";
              } else if (row.state == 2) {
                return "<span style='color:green'>已发货</span>";
              } else if (row.state == -2) {
                return "<span style='color:green'>退款完成</span>";
              } else if (row.state == 3) {
                return "<span style='color:green'>确认收货</span>";
              } else if (row.state == 8) {
                return "<span style='color:green'>完成</span>";
              }
            },
          },
          {
            field: "nick",
            title: "昵称",
          },
          { field: "num", title: "数量" },
          { field: "payRmb", title: "金额" },
          { field: "receivable", title: "收货人" },
          {
            field: "createTime",
            title: "时间",
            type: "html",
            formatter: ({ row }) => parseTime(row.createTime),
          },
        ],
        btnWidth: 380,
        btn: [
          {
            title: "发货",
            type: "success",
            handleName: "handleSend",
            show: (row) => row.state == 1,
          },
          {
            title: "置为已付",
            type: "warning",
            handleName: "handleChange",
            show: (row) => row.state == 0,
          },
          // {
          //   title: "确认退款",
          //   handleName: "",
          //   type: "danger",
          // },
          {
            title: "详情",
            handleName: "",
            type: "info",
          },
        ],
      },
    };
  },

  methods: {
    edit(row, index) {
      console.log(row, index);
    },
    handleADD() {
      this.$refs.addDialog.open();
    },
    handleInfo(row) {
      this.$refs.Info.open(row);
    },
    handleSend(row){
      this.$refs.fahuo.open(row,1)
    },
    async handleChange(row){
      const res = await receivable({
        orderId:row.orderId
      })
      if(!res.status){
        Message.success('修改成功')
        this.success()
      }
    }
  },
};
</script>
